<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" 
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<div id="sidebar" class="sidebar responsive ace-save-state" th:fragment="sidebar">
	
	<!-- 上方四个快捷菜单 -->
	<div class="sidebar-shortcuts" id="sidebar-shortcuts">
		<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
			<button class="btn btn-success">
				<a href="/" target="_blank">
					<i class="ace-icon fa fa-paper-plane white" title="前台首页"></i>
				</a>
			</button>

			<button class="btn btn-warning">
				<a href="/admin/sys/user/userList">
					<i class="ace-icon fa fa-users white" title="用户管理"></i>
				</a>
			</button>
			
			<button class="btn btn-danger">
				<a href="#">
					<i class="ace-icon fa fa-cogs white" title="系统设置"></i>
				</a>
			</button>
			
			<button class="btn btn-info">
				<a href="javascript:;" id="clearCaches">
					<i class="ace-icon fa fa-trash white" title="清除缓存"></i>
				</a>
			</button>
		</div>

		<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
			<span class="btn btn-success">success</span>

			<span class="btn btn-info">info</span>

			<span class="btn btn-warning">warning</span>

			<span class="btn btn-danger">danger</span>
		</div>
	</div><!-- /.sidebar-shortcuts -->
	
	<ul class="nav nav-list" id="sidebar-nav">
		<!-- class="active open"  使标签默认打开 -->
		<script type="text/javascript" th:inline="javascript">
			//清除缓存
			$('#clearCaches').on('click', function(){
				$.ajax({
					url: '/admin/clearCaches',
					type: 'post',
					dataType: 'json',
					async: false,
					success: function(obj){
						if(obj.status == 200){
							gritterSuccess(obj.data);
						}else{
							gritterError(obj.msg);
						}
					},
					error: function(obj){
						gritterError('您无权操作此项');
					}
				})
			});
			
			//获取侧边栏菜单结构树
			$.ajax({
				url: '/admin/sys/menu/sidebarMenuTree',
				type: 'post',
				dataType: 'json',
				async: false,
				success: function(obj){
					if(obj.status == 200){
						getMenuTree(obj.data);
					}
				},
				error: function(obj){
					
				}
			})
			
			//添加一级目录，同时递归添加子目录
			function getMenuTree(data){
				var currentPagePath = window.location.href;
				for(var i = 0; i < data.length; i++){
					var path = data[i].path == '' ? '<a href="#" class="dropdown-toggle">' : '<a href="' + data[i].path + '">';
					var angleDown = data[i].children != null?'<b class="arrow fa fa-angle-down"></b>':'';
					// shiro:hasPermission="' + data[i].perm + '"
					var liId = 'top-li-'+i;
					var li = '<li id="' + liId + '">';
					if(data[i].path != '' && currentPagePath.indexOf(data[i].path) != -1){
						li = '<li class="active" id="' + liId + '">';
					}
					$('#sidebar-nav').append( li
											+ path
											+'<i class="menu-icon fa ' + data[i].icon + '"></i>'
											+'<span class="menu-text"> ' + data[i].name + ' </span>'
											+ angleDown
											+'</a>'
											+'<b class="arrow"></b>');
					appendUl(data[i].children, liId);
					$('#sidebar-nav').append('</li>');
				}
				//将class='active'的li的所有父级li元素添加'active open'，使其默认为展开状态
				$('#sidebar-nav').find('li[class=active]').parents('li').addClass('active open');
			}
			
			//递归添加子目录和子菜单
			function appendUl(children, id){
				var currentPagePath = window.location.href;
				if(children != null){
					var ulId = id + '-sub-ul';
					$('#' + id).append('<ul class="submenu" id="' + ulId + '">');
					for(var j = 0; j < children.length; j++){
						var path = children[j].path == '' ? '<a href="#" class="dropdown-toggle">' : '<a href="' + children[j].path + '">';
						var name = children[j].children != null ? children[j].name : '<span class="menu-text"> ' + children[j].name + ' </span>';
						var angleDown = children[j].children != null?'<b class="arrow fa fa-angle-down"></b>':'';
						// shiro:hasPermission="' + children[j].perm + '"
						var liId2 = ulId + '-' +j;
						var li = '<li id="' + liId2 + '">';
						//如果当前页面是此菜单对应的页面，则添加class='active'
						if(children[j].path != '' && currentPagePath.indexOf(children[j].path) != -1){
							li = '<li class="active" id="' + liId2 + '">';
						}
						$('#' + ulId).append( li
											+ path
											+'<i class="menu-icon fa ' + children[j].icon + '"></i>'
											+ name
											+ angleDown
											+'</a>'
											+'<b class="arrow"></b>');
						appendUl(children[j].children, liId2);//递归添加
						$('#sidebar-nav').append('</li>');
					}
					$('#sidebar-nav').append('</ul>');
				}
			}
			
		</script>
		
		<!-- 下方所有的都是测试用菜单项，此处用空白行分隔 -->
<!-- 		<li class=""> -->
<!-- 			<a href="#" class="dropdown-toggle"> -->
<!-- 			</a> -->
<!-- 		</li> -->
		<!-- 系统工具 -->
<!-- 		<li class=""> -->
<!-- 			<a href="#" class="dropdown-toggle"> -->
<!-- 				<i class="menu-icon fa fa-wrench"></i> -->
<!-- 				<span class="menu-text"> -->
<!-- 					系统工具 -->
<!-- 				</span> -->
<!-- 				<b class="arrow fa fa-angle-down"></b> -->
<!-- 			</a> -->

<!-- 			<b class="arrow"></b> -->

<!-- 			<ul class="submenu"> -->
<!-- 				<li class=""> -->
<!-- 					<a href="/admin/tools/calendar/calendar"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						日历记事本 -->
<!-- 						<span class="badge badge-warning tooltip-warning" title="3个待办事项">3</span> -->
<!-- 					</a> -->
<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->
<!-- 				<li class=""> -->
<!-- 					<a href="/admin/tools/calendar/calendar"> -->
<!-- 						<i class="menu-icon fa fa-calendar"></i> -->
<!-- 						<span class="menu-text"> -->
<!-- 							日历记事本 -->
<!-- 							<span class="badge badge-transparent tooltip-error" title="2个代办事项"> -->
<!-- 								<i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i> -->
<!-- 							</span> -->
<!-- 						</span> -->
<!-- 					</a> -->
<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->
<!-- 			</ul> -->
<!-- 		</li> -->
		<!-- UI & Elements -->
<!-- 		<li class=""> -->
<!-- 			<a href="#" class="dropdown-toggle"> -->
<!-- 				<i class="menu-icon fa fa-desktop"></i> -->
<!-- 				<span class="menu-text"> -->
<!-- 					UI &amp; Elements -->
<!-- 				</span> -->

<!-- 				<b class="arrow fa fa-angle-down"></b> -->
<!-- 			</a> -->

<!-- 			<b class="arrow"></b> -->

<!-- 			<ul class="submenu"> -->
<!-- 				<li class=""> -->
<!-- 					<a href="#" class="dropdown-toggle"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Layouts -->
<!-- 						<b class="arrow fa fa-angle-down"></b> -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->

<!-- 					<ul class="submenu"> -->
<!-- 						<li class=""> -->
<!-- 							<a href="top-menu.html"> -->
<!-- 								<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 								Top Menu -->
<!-- 							</a> -->

<!-- 							<b class="arrow"></b> -->
<!-- 						</li> -->

<!-- 						<li class=""> -->
<!-- 							<a href="two-menu-1.html"> -->
<!-- 								<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 								Two Menus 1 -->
<!-- 							</a> -->

<!-- 							<b class="arrow"></b> -->
<!-- 						</li> -->

<!-- 						<li class=""> -->
<!-- 							<a href="two-menu-2.html"> -->
<!-- 								<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 								Two Menus 2 -->
<!-- 							</a> -->

<!-- 							<b class="arrow"></b> -->
<!-- 						</li> -->

<!-- 						<li class=""> -->
<!-- 							<a href="mobile-menu-1.html"> -->
<!-- 								<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 								Default Mobile Menu -->
<!-- 							</a> -->

<!-- 							<b class="arrow"></b> -->
<!-- 						</li> -->

<!-- 						<li class=""> -->
<!-- 							<a href="mobile-menu-2.html"> -->
<!-- 								<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 								Mobile Menu 2 -->
<!-- 							</a> -->

<!-- 							<b class="arrow"></b> -->
<!-- 						</li> -->

<!-- 						<li class=""> -->
<!-- 							<a href="mobile-menu-3.html"> -->
<!-- 								<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 								Mobile Menu 3 -->
<!-- 							</a> -->

<!-- 							<b class="arrow"></b> -->
<!-- 						</li> -->
<!-- 					</ul> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="typography.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Typography -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="/admin/demos/ui/elements"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Elements -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="buttons.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Buttons &amp; Icons -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="content-slider.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Content Sliders -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="/admin/demos/ui/treeview"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Treeview -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="jquery-ui.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						jQuery UI -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="nestable-list.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Nestable Lists -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->
				
<!-- 				<li class=""> -->
<!-- 					<a href="/admin/demos/easyhelper/index"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						easyhelper分页插件 -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->
				
<!-- 				<li class=""> -->
<!-- 					<a href="/admin/demos/nicepage/index"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						layui分页插件 -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="#" class="dropdown-toggle"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->

<!-- 						Three Level Menu -->
<!-- 						<b class="arrow fa fa-angle-down"></b> -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->

<!-- 					<ul class="submenu"> -->
<!-- 						<li class=""> -->
<!-- 							<a href="#"> -->
<!-- 								<i class="menu-icon fa fa-leaf green"></i> -->
<!-- 								Item #1 -->
<!-- 							</a> -->

<!-- 							<b class="arrow"></b> -->
<!-- 						</li> -->

<!-- 						<li class=""> -->
<!-- 							<a href="#" class="dropdown-toggle"> -->
<!-- 								<i class="menu-icon fa fa-pencil orange"></i> -->

<!-- 								4th level -->
<!-- 								<b class="arrow fa fa-angle-down"></b> -->
<!-- 							</a> -->

<!-- 							<b class="arrow"></b> -->

<!-- 							<ul class="submenu"> -->
<!-- 								<li class=""> -->
<!-- 									<a href="#"> -->
<!-- 										<i class="menu-icon fa fa-plus purple"></i> -->
<!-- 										Add Product -->
<!-- 									</a> -->

<!-- 									<b class="arrow"></b> -->
<!-- 								</li> -->

<!-- 								<li class=""> -->
<!-- 									<a href="#"> -->
<!-- 										<i class="menu-icon fa fa-eye pink"></i> -->
<!-- 										View Products -->
<!-- 									</a> -->

<!-- 									<b class="arrow"></b> -->
<!-- 								</li> -->
<!-- 							</ul> -->
<!-- 						</li> -->
<!-- 					</ul> -->
<!-- 				</li> -->
<!-- 			</ul> -->
<!-- 		</li> -->

		<!-- Tables -->
<!-- 		<li class=""> -->
<!-- 			<a href="#" class="dropdown-toggle"> -->
<!-- 				<i class="menu-icon fa fa-list"></i> -->
<!-- 				<span class="menu-text"> Tables </span> -->

<!-- 				<b class="arrow fa fa-angle-down"></b> -->
<!-- 			</a> -->

<!-- 			<b class="arrow"></b> -->

<!-- 			<ul class="submenu"> -->
<!-- 				<li class=""> -->
<!-- 					<a href="/admin/demos/tables/tables"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Simple &amp; Dynamic -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="/admin/demos/tables/jqgrid"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						jqGrid plugin -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->
<!-- 			</ul> -->
<!-- 		</li> -->

		<!-- Forms -->
<!-- 		<li class=""> -->
<!-- 			<a href="#" class="dropdown-toggle"> -->
<!-- 				<i class="menu-icon fa fa-pencil-square-o"></i> -->
<!-- 				<span class="menu-text"> Forms </span> -->

<!-- 				<b class="arrow fa fa-angle-down"></b> -->
<!-- 			</a> -->

<!-- 			<b class="arrow"></b> -->

<!-- 			<ul class="submenu"> -->
<!-- 				<li class=""> -->
<!-- 					<a href="form-elements.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Form Elements -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="form-elements-2.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Form Elements 2 -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="form-wizard.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Wizard &amp; Validation -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="wysiwyg.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Wysiwyg &amp; Markdown -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="dropzone.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Dropzone File Upload -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->
<!-- 			</ul> -->
<!-- 		</li> -->

		<!-- Widgets -->
<!-- 		<li class=""> -->
<!-- 			<a href="widgets.html"> -->
<!-- 				<i class="menu-icon fa fa-list-alt"></i> -->
<!-- 				<span class="menu-text"> Widgets </span> -->
<!-- 			</a> -->

<!-- 			<b class="arrow"></b> -->
<!-- 		</li> -->

		<!-- Gallery -->
<!-- 		<li class=""> -->
<!-- 			<a href="gallery.html"> -->
<!-- 				<i class="menu-icon fa fa-picture-o"></i> -->
<!-- 				<span class="menu-text"> Gallery </span> -->
<!-- 			</a> -->

<!-- 			<b class="arrow"></b> -->
<!-- 		</li> -->

		<!-- More Pages -->
<!-- 		<li class=""> -->
<!-- 			<a href="#" class="dropdown-toggle"> -->
<!-- 				<i class="menu-icon fa fa-tag"></i> -->
<!-- 				<span class="menu-text"> More Pages </span> -->

<!-- 				<b class="arrow fa fa-angle-down"></b> -->
<!-- 			</a> -->

<!-- 			<b class="arrow"></b> -->

<!-- 			<ul class="submenu"> -->
<!-- 				<li class=""> -->
<!-- 					<a href="/admin/demos/morePages/profile"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						User Profile -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="inbox.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Inbox -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="pricing.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Pricing Tables -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="invoice.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Invoice -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="timeline.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Timeline -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="search.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Search Results -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="email.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Email Templates -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="login.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Login &amp; Register -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->
<!-- 			</ul> -->
<!-- 		</li> -->

		<!-- Other Pages -->
<!-- 		<li class=""> -->
<!-- 			<a href="#" class="dropdown-toggle"> -->
<!-- 				<i class="menu-icon fa fa-file-o"></i> -->

<!-- 				<span class="menu-text"> -->
<!-- 					Other Pages -->

<!-- 					<span class="badge badge-primary">5</span> -->
<!-- 				</span> -->

<!-- 				<b class="arrow fa fa-angle-down"></b> -->
<!-- 			</a> -->

<!-- 			<b class="arrow"></b> -->

<!-- 			<ul class="submenu"> -->
<!-- 				<li class=""> -->
<!-- 					<a href="faq.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						FAQ -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="error-404.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Error 404 -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="error-500.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Error 500 -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="/admin/demos/others/grid"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Grid -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->

<!-- 				<li class=""> -->
<!-- 					<a href="blank.html"> -->
<!-- 						<i class="menu-icon fa fa-caret-right"></i> -->
<!-- 						Blank Page -->
<!-- 					</a> -->

<!-- 					<b class="arrow"></b> -->
<!-- 				</li> -->
<!-- 			</ul> -->
<!-- 		</li> -->
	</ul><!-- /.nav-list -->

	<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
		<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
	</div>
	
</div>

</html>